<template>
	<view>
		<index @ShowNews="ShowNews" v-if="PageCur=='index'"></index>
		<vip v-if="PageCur=='vip'"></vip>
		<cases v-if="PageCur=='cases'"></cases>
		<news v-if="PageCur=='news'"></news>
		<me v-if="PageCur=='me'"></me>


		<view class="box">
			<view class="cu-bar tabbar bg-white shadow foot">
				<!-- 首页 -->
				<view class="action" @click="NavChange" data-cur="index">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='index'" src="../../static/tabBar/home-active.png"></image>
						<image v-if="PageCur != 'index'" src="../../static/tabBar/home.png"></image>
					</view>
					<view :class="PageCur=='index'?'color_main':'text-gray'">首页</view>
				</view>

				<!-- vip -->
				<view class="action" @click="NavChange" data-cur="vip">
					<view class='cuIcon-cu-image'>
						<view class="cu-tag badge"><!-- 红点 --></view>
						<image v-if="PageCur=='vip'" src="../../static/tabBar/box-active.png"></image>
						<image v-if="PageCur != 'vip'" src="../../static/tabBar/box.png"></image>
					</view>
					<view :class="PageCur=='vip'?'color_main':'text-gray'">会员专区</view>
				</view>

				<!-- 中间大块 -->
				<view @click="NavChange" class="action text-gray add-action" data-cur="cases" v-if="currentRole == 'student'">
					<!-- <image class="logo_btn" mode="widthFix" src="../../static/logo.png"></image> -->
					<image v-if="PageCur=='cases'" src="../../static/tabBar/tool-active.png" class="logo_btn" mode="widthFix"></image>
					<image v-if="PageCur != 'cases'" src="../../static/tabBar/tool.png" class="logo_btn" mode="widthFix"></image>
					<view :class="PageCur=='cases'?'color_main':'text-gray'">功能案例</view>
				</view>

				<!-- 新闻 -->
				<view class="action" @click="NavChange" data-cur="news">
					<view class='cuIcon-cu-image'>
						<view class="cu-tag badge">{{message}}</view>
						<image v-if="PageCur=='news'" src="../../static/tabBar/message-active.png"></image>
						<image v-if="PageCur != 'news'" src="../../static/tabBar/message.png"></image>
					</view>
					<view :class="PageCur=='news'?'color_main':'text-gray'">文章资讯</view>
				</view>
				<!-- 个人中心 -->
				<view class="action" @click="NavChange" data-cur="me">
					<view class='cuIcon-cu-image'>
						<image v-if="PageCur=='me'" src="../../static/tabBar/mine-active.png"></image>
						<image v-if="PageCur != 'me'" src="../../static/tabBar/mine.png"></image>
					</view>
					<view :class="PageCur=='me'?'color_main':'text-gray'">个人中心</view>
				</view>

			</view>
		</view>
	</view>
</template>

<script>
	import index from './index.vue'
	import vip from './vip.vue'
	import cases from './main.vue'
	import news from './news.vue'
	import me from './me.vue'
	export default {
		components: {
			index,
			vip,
			cases,
			news,
			me
		},
		data() {
			return {
				PageCur: 'index', //当前页面
				message: '0', //页面角标
				openId: '',
				currentRole:'student'
			}
		},
		onLoad() {
			
		},
		/**
		 * 页面相关事件处理函数--监听用户下拉动作，下拉刷新
		 */
		onPullDownRefresh(){
			console.log("=============>这里是tabbar页面开启的下拉刷新<==============");
		},
		/**
		 * 到达底部，查询下一页数据,上拉触底
		 */
		onReachBottom(){
			
		},
		methods: {
			ShowNews(e) {
				this.PageCur = e;
			},
			NavChange: function(e) {
				console.log(e.currentTarget.dataset.cur);
				//点击当前页面赋值
				this.PageCur = e.currentTarget.dataset.cur;

				if (this.PageCur == 'index') {
					
				} else if (this.PageCur == 'component') {
					
				} else if (this.PageCur == 'cases') {
				
				} else if (this.PageCur == 'news') {
					
				} else if (this.PageCur == 'me') {
					
				}
			},
		}
	}
</script>

<style lang="scss">
	.color_main {
		color: #000000;
		font-weight: 900;
	}

	.box {
		margin: 20upx 0;
	}

	.box view.cu-bar {
		margin-top: 20upx;
	}

	.logo_btn {
		width: 38*2rpx;
		height: 38*2rpx;
		position: absolute;
		z-index: 2;
		border-radius: 50%;
		top: -40rpx;
		left: 0rpx;
		right: 0;
		margin: auto;
		padding: 0;
	}

	.cu-bar.tabbar .action.add-action {
		padding-top: 56rpx !important;
	}
</style>